<template>
	<!-- 创建编辑新考试 -->
	<div class="addExamMain">
		<div class="addExamContent">
			<h3>新增考生</h3>
			<el-form :model="studentobj" :rules="rules" ref="studentForm">
				<ul>
				<li>
					<span>学号：</span>
					<div class="inputBox">
					<el-form-item prop="userNumber">
						<el-input v-model="studentobj.userNumber" placeholder="请输入内容" clearable></el-input>
					</el-form-item>
					</div>
				</li>
				<li>
					<span>考号：</span>
					<div class="inputBox">
					<el-form-item prop="examNumber">
						<el-input v-model="studentobj.examNumber" placeholder="请输入内容" clearable></el-input>
					</el-form-item>
					</div>
				</li>
				<li>
					<span>姓名：</span>
					<div class="inputBox">
					<el-form-item prop="username">
						<el-input v-model="studentobj.username" placeholder="请输入内容" clearable></el-input>
					</el-form-item>
					</div>
				</li>
				<li>
					<span>学校：</span>
					<div class="inputBox">
					<el-form-item prop="schoolId">
						<el-select v-model="schoolId" placeholder="请选择学校" @change="schoolindexclass">
							<el-option
								v-for="item in schoollist"
								:key="item.gradeid"
								:label="item.schoolname"
								:value="item.gradeid">
							</el-option>
						</el-select>
					</el-form-item>
					</div>
				</li>
				<li>
					<span>班级：</span>
					<div class="inputBox">
					<el-form-item prop="classid">
						<el-select v-model="studentobj.classid" placeholder="请选择班级" @focus="classindexclass">
							<el-option
								v-for="item in classlist"
								:key="item.classid"
								:label="item.classname"
								:value="item.classid">
							</el-option>
						</el-select>
					</el-form-item>
					</div>
				</li>
				<li>
					<span>考场：</span>
					<div class="inputBox">
					<el-form-item prop="examRoomNumber">
						<el-input v-model="studentobj.examRoomNumber" placeholder="请输入内容" clearable></el-input>
					</el-form-item>
					</div>
				</li>
				<li>
					<span>座号：</span>
					<div class="inputBox">
					<el-form-item prop="seatNumber">
						<el-input v-model="studentobj.seatNumber" placeholder="请输入内容" clearable></el-input>
					</el-form-item>
					</div>
				</li>
				<li v-if="tabnumber==2">
					<span>选科：</span>
					<div class="inputBox">
					<el-form-item prop="selectSubject">
						<el-select v-model="selectSubject" multiple placeholder="请选择科目">
						<el-option
							v-for="item in subjectlist"
							:key="item.subjectname"
							:label="item.subjectname"
							:value="item.subjectname">
						</el-option>
						</el-select>
					</el-form-item>
					</div>
				</li>
				</ul>
				<div class="groupbutton">
				<el-button type="primary" @click="submitForm('studentForm')">保存</el-button>
				<el-button type="primary" @click="goback">返回</el-button>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
import {
	singlestudentadd,
	getexamallschool,
	getexamallschoolClasslist,
	getSubjectslist
} from '../../api/api.js'
	export default{
		props:['examobj','addexamtype','tabnumber','addstudentcon'],
		data(){
			return{
                studentobj:{
					userid:0,
					userNumber:'',
					examNumber:'',
					username:'',
					classid:'',
					examRoomNumber:'',
					seatNumber:'',
					subjectname1:'',
					subjectname2:'',
					subjectname3:'',
					subjectname4:'',
				},
				selectSubject:[],
				subjectlist:[],
				tabnumber: 1,
    			examlist: [],
				rules: {
					userNumber: [
						{ required: true, message: '请输入学号', trigger: 'blur' }
					],
					examNumber: [
						{ required: true, message: '请输入考号', trigger: 'blur' }
					],
					username: [
						{ required: true, message: '请输入姓名', trigger: 'blur' }
					],
					classid: [
						{ required: true, message: '请选择班级', trigger: 'change' }
					],
					examRoomNumber: [
						{ required: true, message: '请输入考场号', trigger: 'blur' }
					],
					seatNumber: [
						{ required: true, message: '请输入座号', trigger: 'blur' }
					]
				},
				schoolId:'',
				schoollist:[],
				classlist:[]
			} 
		},
		mounted() {
			this.examcontent = JSON.parse(sessionStorage.getItem('examContent'));
			this.getschoolnamelist(this.examcontent.nav5id)
			this.getsubjectget()
			console.info('this.addstudentcon',this.addstudentcon)
			if(this.addstudentcon!={}){
				this.studentobj.userNumber = this.addstudentcon.userNumber
				this.studentobj.examNumber = this.addstudentcon.examNumber
				this.studentobj.username = this.addstudentcon.studentname
				this.studentobj.classid = this.addstudentcon.classname
				this.studentobj.examRoomNumber = this.addstudentcon.examRoomNumber
				this.studentobj.seatNumber = this.addstudentcon.seatNumber
				this.studentobj.seatNumber = this.addstudentcon.seatNumber
				this.schoolId = this.addstudentcon.gradeid
				this.studentobj.classid = this.addstudentcon.classid
				this.studentobj.userid = this.addstudentcon.studentid || 0
				this.selectSubject = this.addstudentcon.nav6names
			}
		},
		methods:{
            onSelected(){
				
			},
            filterMethod(query) {
                this.searchQuery = query
                this.filteredOptions = this.examclassify.filter(item => 
                    item.name.toLowerCase().includes(query.toLowerCase())
                )
            },
            goback(){
				this.$emit('addSchoolclick',false)
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
				if (valid) {
					if(this.selectSubject&&this.selectSubject.length>0){
						this.studentobj.subjectname1 = this.selectSubject[0]?this.selectSubject[0]:'';
						this.studentobj.subjectname2 = this.selectSubject[1]?this.selectSubject[1]:'';
						this.studentobj.subjectname3 = this.selectSubject[2]?this.selectSubject[2]:'';
						this.studentobj.subjectname4 = this.selectSubject[3]?this.selectSubject[3]:'';
					}else{
						this.$message.success('请选择选科');
					}
					console.info('valid',this.selectSubject)
					singlestudentadd(this.studentobj).then(res=>{
					    console.info(res)
						if(res.code===0){
							this.$message.success('添加成功');
							this.$emit('addStudentclick',false)	
						}else{
							this.$message.error(res.msg)
						}
					})
				} else {
					// 验证失败
					this.$message.error('请填写完整信息');
					return false;
				}
				});
			},
			//年级查询
			schoolindexclass(val){
				if(val!=''){
					let obj={
						gradeid:val
					}
					getexamallschoolClasslist(obj).then(res=>{
						if(res.code===0){
							this.classlist = res.obj
						}else{
							this.$message.error(res.msg)
						}
					})
				}
			},
			//班级查询
			classindexclass(val){
				if(this.schoolId==''){
					this.$message.error('请选择学校');
					return false;
				}
			},
			//获取这场考试的所有学校
			getschoolnamelist(id){
				let obj={
					nav5id:id
				}
				getexamallschool(obj).then(res=>{
					// console.info(res)
					if(res.code===0){
						this.schoollist = res.obj
					}else{
						this.$message.error(res.msg)
					}
				})
			},
			// 获取学科
			getsubjectget(){
			    getSubjectslist().then(res=>{
					this.subjectlist = res.obj
			    })
			}
		}
	}
</script>

<style scoped>
	.addExamMain{
		position: fixed;
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.5);
		left:0;
		top:0;
		z-index:100;
	}
	.addExamContent{
		width: 584px;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		position: fixed;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		z-index:2;
		box-sizing: border-box;
		padding:30px;
	}
	.addExamContent h3{
		font-size:18px;
		padding-bottom:20px;
	}
	.addExamContent ul li{
		display: flex;
		align-items: center;
		padding-bottom:14px;
		font-size:14px;
	}
	.addExamContent ul li span{
		font-size:14px;
		width:50px;
		color: #557292;
		text-align: right;
	}
	.addExamContent ul li p{
		position: relative;
	}
	.addExamContent ul li p em{
		position: absolute;
		right:10px;
		top:50%;
		transform: translateY(-50%);
		color:#C0C4CC;
		cursor: pointer;
	}
	.addExamContent ul li >>>.el-input__inner{
		width: 400px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.inputBox{
		width: 400px;
	}
	.inputBox1{
		width: 300px;
	}
	.addExamContent ul li div.inputBox1 >>> .el-input__inner{
		width:300px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.addExamContent ul li >>> .el-range__icon{
		line-height:27px;
	}
	.addExamContent ul li >>> .el-form-item{
		margin-bottom:0;
	}
	.groupbutton{
		display: flex;
		align-items: center;
		padding-top:20px;
	}
	.groupbutton >>> .el-button{
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-size: 14px;
		color: #FFFFFF;
		padding:0;
	}
	.groupbutton >>> .el-button:last-child{
		background: #F2F6FB;
		border-radius: 10px;
		border: 1px solid #295CFF;
		color:#295CFF;
		margin-left:24px;
	}
	.bcontentcolor{
		font-size:14px;
		color:#295CFF;
		display: inline-block;
		margin-left:20px;
		cursor: pointer;
	}
	.el-checkbox{
		margin-right:8px;
	}
	.infosetcontentfont{
		color:#5B6371
	}
	.addExamContent ul li.infosetcontentfont span{
		width:auto;
		height: 26px;
		border-radius: 4px;
		border: 1px solid #D8E4F0;
		color:#B3B8C2;
		font-size:14px;
		text-align:left;
		line-height:26px;
		padding:0 16px 0 10px;
		margin-left:10px;
	}
	.addExamContent ul li.infosetcontentfont i{
		font-style:normal;
		color:#295CFF;
		padding:0 4px;
	}
    .addExamContent >>> .distpicker-address-wrapper select{
        height:36px;
        border-radius:10px;
        border:1px solid #D8E4F0;
        color:#999;
    }
	.inputBox1 >>> .el-tag.el-tag--info{
		background: #F2F6FB;
		border: 1px solid #D8E4F0;
		color: #B3B8C2;
	}
	.inputBox1 >>> .el-select .el-tag__close.el-icon-close{
		background:none;
		color:#B3B8C2;
	}
    .inputBox >>> .distpicker-address-wrapper select{
		border-radius: 10px;
    	height: 35px;
		font-size: 16px;
		line-height: 35px;
		border: 1px solid #D8E4F0;
		color:#606266;
		padding:0 10px;
	}
	/* 错误状态下的红色边框 */
	.addExamContent ul li >>> .el-form-item.is-error .el-input__inner,
	.addExamContent ul li >>> .el-form-item.is-error .el-textarea__inner,
	.addExamContent ul li >>> .el-form-item.is-error .el-select .el-input__inner {
	border-color: #f56c6c !important;
	}
</style>